<template>
  <div class="my-store">
    <div class="list">
      <div class="item" @click="router({path: './storeDetails'})">
        <img class="item-img" src="@/assets/xianxiamendian04.png" alt="">
        <div class="cons">
          <p class="title">智保天赋太古汇旗舰店</p>
          <p class="address">
            <span class="address-name">广州市天河区太古汇商广州市天河区太古汇商...</span>
            <span class="address-num">245m</span>
          </p>
          <p class="tip">
            <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
            <span class="tip-con">本线下门店将迎来教育日所有本线下门店将迎来教育日所有...</span>
          </p>
        </div>
        <i class="icon">已办卡</i>
      </div>
      <div class="item">
        <img class="item-img" src="@/assets/xianxiamendian04.png" alt="">
        <div class="cons">
          <p class="title">智保天赋太古汇旗舰店</p>
          <p class="address">
            <span class="address-name">广州市天河区太古汇商广州市天河区太古汇商...</span>
            <span class="address-num">245m</span>
          </p>
          <p class="tip">
            <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
            <span class="tip-con">本线下门店将迎来教育日所有本线下门店将迎来教育日所有...</span>
          </p>
        </div>
        <i class="icon">已办卡</i>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    components: {
    },
    data () {
      return {
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.my-store
  min-height 100vh
  background-color #fff
  .list
    padding 0 2rem
    background-color #fff
    .item
      padding 1.5rem 0
      display flex
      border-bottom 1px solid #e6e6e6
      .item-img
        width 12.2rem
        height 9.2rem
        margin-right 1rem
      .cons
        flex 1
        .title
          color #333333
          font-size 1.7rem
          font-weight bold
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          width calc(100vw - 17.2rem)
        .address
          font-size 1.2rem
          color #999
          overflow hidden
          margin 1.3rem 0
          .address-name
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            float left
            width calc(100vw - 22.2rem)
          .address-num
            float right
            text-align right
        .tip
          overflow hidden
          .tip-img
            width 1.6rem
            height 1.6rem
            float left
          .tip-con
            float left
            margin-left .5rem
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            width calc(100vw - 21.2rem)
            color #172F6D
      .icon
        position absolute
        width 5rem
        height 2.2rem
        background linear-gradient(0deg,rgba(180,48,20,1) 0%,rgba(210,56,24,1) 100%)
        font-size 1.2rem
        color #fff
        text-align center
        line-height 2.2rem
</style>
